<template>
  <div class="disaster-popup">
    <div class="popupTitle">{{ item.disasterName }}</div>
    <div class="bottom">
      <div class="early">
        <div
          :class="['tablist', tabactive == d.code ? 'select' : '']"
          v-for="(d, i) in tabtypeData"
          :key="i"
          @click="switchTab(d.code)"
        >
          {{ d.name }}
        </div>
      </div>
      <div class="content">
        <div v-if="tabactive == '1'">
          <div class="listline">
            <div class="listbox">
              <div class="title">灾害类型</div>
              <div>{{ item.disasterType }}</div>
            </div>
            <div class="listbox">
              <div class="title">灾害名称</div>
              <div>{{ item.disasterName }}</div>
            </div>
          </div>
          <div class="listline">
            <div class="listbox">
              <div class="title">省</div>
              <div>{{ item.province }}</div>
            </div>
            <div class="listbox">
              <div class="title">市</div>
              <div>{{ item.city }}</div>
            </div>
            <div class="listbox">
              <div class="title">区</div>
              <div>{{ item.county }}</div>
            </div>
            <div class="listbox">
              <div class="title">经纬度</div>
              <div>{{ item.longitude }},{{ item.latitude }}</div>
            </div>
          </div>
          <div class="listline">
            <div class="listbox">
              <div class="title">具体地址</div>
              <div>{{ item.position }}</div>
            </div>
          </div>
          <div class="listline">
            <div class="listbox">
              <div class="title">威胁等级</div>
              <div>{{ item.dangerLevel }}</div>
            </div>
            <div class="listbox">
              <div class="title">威胁人口</div>
              <div>{{ item.dangerPeopleNum + '人' }}</div>
            </div>
            <div class="listbox">
              <div class="title">威胁财产</div>
              <div>{{ item.dangerEstate + '万' }}</div>
            </div>
          </div>
          <div class="listline">
            <div class="listbox">
              <div class="title">防治建议</div>
              <div>{{ item.monitorSuggest }}</div>
            </div>
          </div>
        </div>
        <div v-if="tabactive == '2'">
          <div class="live-situation">
            <div class="dialog-content-echart">
              <div class="one-line">
                <div
                  class="top-item"
                  v-for="(item, index) in posList"
                  :key="index"
                >
                  <div class="spot"></div>
                  <div class="name">{{ item.name }}</div>
                  <div class="value">{{ item.value }}</div>
                </div>
              </div>
              <div class="content-top">
                <div
                  class="top-item-value"
                  v-for="(item, index) in informationListTwo"
                  :key="index"
                >
                  <div class="left">
                    <div :class="[`icon${index}`]"></div>
                    <div class="value">{{ item.value }}</div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div
                    class="line"
                    v-if="index != informationListTwo.length - 1"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabactive == '3'">
          <div class="prediction">
            <div class="dialog-content-echart">
              <div class="label-title">逐时预报</div>
              <div class="content-tab">
                <div class="tab-left">
                  <div
                    v-for="(item, index) in chartType"
                    :key="index"
                    :class="[
                      filterActive == item.detailKey ? 'echartsActive' : ''
                    ]"
                    @click="echartsFilter(item)"
                  >
                    {{ item.name }}
                  </div>
                </div>
                <!-- <div class="tab-right">
                  <div>
                    <img src="../../../images/table.png" alt="" />
                  </div>
                  <div>
                    <img src="../../../images/download.png" alt="" />
                  </div>
                </div> -->
              </div>
              <div class="content-echarts" v-loading="chartLoading">
                <VChart
                  ref="chartRef"
                  class="chart-content"
                  :option="chartOption"
                />
              </div>
            </div>
          </div>
        </div>
        <div v-if="tabactive == '4'">
          <div class="prediction">
            <div class="dialog-content-echart">
              <div class="label-title label-title-two">十天预报表</div>
              <div class="forecast-table">
                <div class="right-column">
                  <div
                    class="column-header"
                    v-for="(item, index) in predictionDayData"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                  <div class="column-content">
                    <div
                      class="right-line"
                      v-for="(item, index) in tableData"
                      :key="index"
                    >
                      <div
                        class="right-item"
                        v-for="(line, index) in item"
                        :key="index"
                      >
                        {{ line }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="fileDownload">
                <div>
                  <img src="../../../images/file.png" alt="" />
                  重要天气预报.pdf
                </div>
                <div @click="fileDownload">立即下载</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['item'])
import VChart from 'vue-echarts'
import apiList from '@/pages/conventional-fine-forecasting/api/api'
import apiLists from '@/pages/integrated-monitoring/api/api'
const tabactive = ref('1')
const tabtypeData = [
  {
    name: '灾害信息',
    code: '1'
  },
  {
    name: '实况',
    code: '2'
  },
  {
    name: '逐时预报',
    code: '3'
  },
  {
    name: '十天预报',
    code: '4'
  }
]

//实况
const chartRef = ref(null)
const posList = ref([])
const informationListTwo = ref([])
const initData = async () => {
  const res = await apiLists.getWeatherFactsByCoordinate({
    latitude: props.item.latitude,
    longitude: props.item.longitude
  })
  posList.value = [
    {
      name: '经度',
      value: props.item.longitude
    },
    {
      name: '纬度',
      value: props.item.latitude
    }
  ]
  informationListTwo.value = [
    {
      name: '气温',
      value: res.data.temperature + '℃'
    },
    {
      name: res.data.windDirection,
      value:
        res.data.windSpeed == '999999'
          ? '暂无数据'
          : res.data.windSpeed
          ? res.data.windSpeed + 'm/s'
          : 0
    },
    {
      name: '降水',
      value: res.data.rainfall + 'mm'
    },
    {
      name: '湿度',
      value:
        res.data.humidity == '999999'
          ? '暂无数据'
          : res.data.humidity
          ? res.data.humidity + '%'
          : 0
    }
  ]
}
//预报
const filterActive = ref('TEM')
const stationLoading = ref(false)
const predictionDayData = ref([])
const tableData = ref([])
const chartType = ref([
  {
    name: '气温',
    unit: '℃',
    key: 'TEM',
    detailKey: 'TEM'
  },
  {
    name: '风',
    unit: 'm/s',
    key: 'WIND',
    detailKey: 'WIND'
  },
  {
    name: '湿度',
    unit: '%',
    key: 'RH',
    detailKey: 'RH'
  },
  // {
  //   name: '气压',
  //   unit: 'hpa',
  //   key: 'PRs',
  //   detailKey: 'PRs'
  // },
  {
    name: '降水',
    unit: 'mm',
    key: 'RAIN',
    detailKey: 'RAIN'
  },
  {
    name: '能见度',
    unit: 'm',
    key: 'VIS',
    detailKey: 'VIS'
  }
])
const chartOption = ref({
  title: {
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#343434',
      fontSize: '14px',
      fontWeight: '400'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '1%',
    top: '12%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    axisTick: {
      show: false // 隐藏X轴刻度
    },
    axisLine: {
      lineStyle: {
        color: '#828C99',
        type: 'dashed' // 设置线条为虚线
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#828C99',
        fontSize: 13
      }
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0%', '20%'],
    alignTicks: true,
    splitNumber: 5,
    nameTextStyle: {
      color: '#828C99',
      fontSize: 13,
      align: 'left',
      verticalAlign: 'center',
      padding: [0, 0, 0, -30]
    },
    nameGap: 25,
    axisLabel: {
      color: '#828C99',
      fontSize: 13
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#CCD6EB',
        type: 'dashed' // 设置线条为虚线
      }
    }
  },
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
      symbol: 'none',
      lineStyle: {
        color: '#00F8FF',
        width: 2
      }
    }
  ]
})
const chartLoading = ref(false)
const handleInitChart = async () => {
  chartLoading.value = true
  const res = await apiList.getElementHourCurve({
    elementCode: filterActive.value,
    latitude: props.item.latitude,
    longitude: props.item.longitude
  })
  // currentChartData.value = res.result.records
  chartOption.value.xAxis.data = []
  res.data.xAxis.forEach(element => {
    chartOption.value.xAxis.data.push(String(element).slice(-2))
  })
  chartOption.value.series[0].data = res.data.yAxis
  chartLoading.value = false
}
const handleInitData = async () => {
  stationLoading.value = true
  const res = await apiList.getFuture10DayReport({
    latitude: props.item.latitude,
    longitude: props.item.longitude
  })
  predictionDayData.value = res.data.colHeader
  tableData.value = res.data.data
  stationLoading.value = false
}
const switchTab = code => {
  tabactive.value = code
  if (code == 2) {
    initData()
  } else if (code == 3) {
    filterActive.value = 'TEM'
    handleInitChart()
    handleInitData()
  }
}
const echartsFilter = item => {
  filterActive.value = item.detailKey
  handleInitChart()
}
onMounted(() => {
  tabactive.value = 1
})

const fileDownload = () => {
  apiList
    .downLoadForecastPDF({
      latitude: props.item.latitude,
      longitude: props.item.longitude
    })
    .then(res => {
      // 创建Blob对象
      const blob = new Blob([res], {
        type: 'application/pdf;charset=utf-8'
      })
      // 创建临时链接
      const url = window.URL.createObjectURL(blob)

      // 创建a标签并设置相关属性
      const a = document.createElement('a')
      a.href = url
      a.download = `天气预报专报.pdf` // 设置下载文件的文件名
      // 触发点击事件，下载文件
      a.click()
      // 清理临时链接
      window.URL.revokeObjectURL(url)
    })
}
</script>

<style scoped lang="scss">
.disaster-popup {
  width: 680px;
  .popupTitle {
    line-height: 50px;
    padding-left: 17px;
    font-family: 'ALIMAMA_SHUHEITI_BOLD';
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
    background: url('@/assets/images/warningpoptop.png') no-repeat 0/100% 100%;
  }
  .bottom {
    width: 100%;
    box-sizing: border-box;
    background: url('@/assets/images/warningpopbottom.png') no-repeat -1px/100% 100%;
    padding: 16px 12px;
  }
  .early {
    display: flex;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0px 0px 2px #603700;
    .tablist {
      width: 96px;
      text-align: center;
      line-height: 35px;
      margin-right: 12px;
      cursor: pointer;
      color: #fff;
      color: #ed8c0b;
      border: 1px solid #ed8c0b;
      background: transparent;
      &.select {
        color: #fff;
        background: rgb(92, 65, 18, 0.6);
        box-shadow: 1px 1px 10px #603700 inset;
      }
    }
  }
  .live-situation {
    height: 225px;
    .dialog-content-echart {
      height: 266px;
      margin-top: 15px;
      padding: 0 21px;
      box-sizing: border-box;
      .one-line {
        display: flex;
        justify-content: center;
      }

      .top-item {
        min-width: 131px;
        height: 42px;
        background: #4a3417;
        border-left: 3px solid #ff9e1b;
        margin-right: 19px;
        margin-top: 15px;
        padding: 11px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 5px;
        float: left;
        .spot {
          width: 4px;
          height: 4px;
          background: #a8eaff;
          box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
          border-radius: 3px 3px 3px 3px;
          margin-right: 14px;
        }
        .name {
          font-weight: 400;
          font-size: 14px;
          color: #e0d9cf;
          line-height: 0px;
          font-style: normal;
          margin-right: 11px;
          word-wrap: break-word;
        }
        .value {
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 0px;
          font-style: normal;
        }
      }
      .content-top {
        width: 100%;
        height: 120px;
        padding: 0 3px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .top-item-value {
          width: 125px;
          height: 88px;
          display: inline-block;
          margin-bottom: 5px;
          .left {
            width: calc(100% - 1px);
            float: left;
          }
          .line {
            float: right;
          }
          .icon0,
          .icon1,
          .icon2,
          .icon3,
          .icon4,
          .icon5 {
            width: 27px;
            height: 22px;
            background: url(../../../images/icon3.png) no-repeat;
            background-size: 100% 100%;
            margin-bottom: 18px;
            margin-left: 25px;
            margin-left: 50%;
            transform: translateX(-50%);
          }
          .icon1 {
            width: 17px;
            background-image: url(../../../images/icon2.png);
          }
          .icon2 {
            width: 23px;
            background-image: url(../../../images/icon0.png);
          }
          .icon3 {
            width: 21px;
            background-image: url(../../../images/icon1.png);
          }
          .icon4 {
            width: 31px;
            background-image: url(../../../images/icon4.png);
          }
          .icon5 {
            width: 24px;
            background-image: url(../../../images/icon5.png);
          }
          .value {
            width: 100%;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 500;
            font-size: 20px;
            color: #ffffff;
            line-height: 20px;
            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
          }
          .name {
            width: 100%;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #e0d9cf;
            line-height: 10px;
          }
        }
        .line {
          width: 1px;
          height: 32px;
          background-color: #5d6b75;
          margin-top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .prediction {
    height: auto;
    .dialog-content-echart {
      height: auto;
      margin-top: 15px;
      margin-bottom: 10px;
      padding: 0 21px;
      box-sizing: border-box;
      .label-title {
        width: 88px;
        height: 31px;
        background: url(../../../images/label-title.png) no-repeat;
        background-size: 100% 100%;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        line-height: 31px;
        text-shadow: 0px 0px 2px rgba(0, 230, 255, 0.63);
        text-align: left;
        font-style: normal;
        padding-left: 7px;
        box-sizing: border-box;
        margin: 10px 0 15px -6px;
      }
      .label-title-two {
        width: 101px;
        margin: 10px 0 10px -6px;
      }
      .content-top {
        width: 100%;
        height: 42px;
        display: flex;
        margin-bottom: 20px;
        .top-item {
          width: 131px;
          height: 42px;
          background: url(../../../images/contentData.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 19px;
          padding: 11px 16px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .spot {
            width: 4px;
            height: 4px;
            background: #a8eaff;
            box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
            border-radius: 3px 3px 3px 3px;
            margin-right: 14px;
          }
          .name {
            font-weight: 400;
            font-size: 14px;
            color: #e0d9cf;
            line-height: 0px;
            text-align: center;
            font-style: normal;
            margin-right: 11px;
          }
          .value {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 0px;
            text-align: center;
            font-style: normal;
          }
        }
        .top-item:last-child {
          margin-right: 0;
        }
      }
      .content-tab {
        width: 100%;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab-left {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          div {
            width: 55px;
            height: 28px;
            background: #4a3417;
            border-left: 3px solid #ff9e1b;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #ed8c0b;
            font-weight: 400;
            font-size: 14px;
            color: #ed8c0b;
            line-height: 28px;
            text-align: center;
            font-style: normal;
            margin-right: 4px;
            cursor: pointer;
            opacity: 0.68;
          }
          .echartsActive {
            width: 71px;
            height: 28px;
            color: #ffffff;
            background: rgba(92, 65, 18, 0.6);
            box-shadow: 0px 0px 6px 1px rgba(255, 153, 0, 0.36);
            opacity: 1;
          }
        }
        .tab-right {
          display: flex;
          justify-content: flex-start;
          div {
            width: 28px;
            height: 28px;
            background: transparent;
            border-radius: 2px 2px 2px 2px;
            border: 1px solid #ed8c0b;
            margin-right: 8px;
            cursor: pointer;
            img {
              width: 28px;
              height: 28px;
            }
          }
          div:last-child {
            margin-right: 0;
          }
        }
      }
      .content-echarts {
        width: 615px;
        height: 220px;
        margin-top: 15px;
      }
      .forecast-table {
        width: 620px;
        height: 325px;
        // overflow-y: auto;
        .column {
          width: 149px;
          height: 100%;
          float: left;
          margin-right: 3px;
          .column-item {
            width: 100%;
            height: 35px;
            // background: url(../../../images/title-bag.png) no-repeat;
            // background-size: 100% 100%;
            border: 1px solid #ed8c0b;
            font-weight: 400;
            font-size: 14px;
            color: #e0d9cf;
            line-height: 35px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
        .right-column {
          display: inline-block;
          width: calc(100% - 10px);
          height: 100%;
          white-space: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          .column-header {
            width: 143px;
            height: 35px;
            // background: url(../../../images/title-bag.png) no-repeat;
            // background-size: 100% 100%;
            border: 1px solid #ed8c0b;
            margin-bottom: 1px;
            font-weight: 400;
            font-size: 14px;
            color: #e0d9cf;
            line-height: 35px;
            text-align: center;
            font-style: normal;
            cursor: pointer;
            display: inline-block;
            margin-right: 2px;
          }
          .column-header:first-child {
            width: 149px;
            font-weight: 400;
            font-size: 14px;
            color: #e0d9cf;
            line-height: 35px;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
          .column-content {
            width: 100%;
            // box-shadow: inset 0px 0px 14px 1px rgba(0, 204, 255, 0.64);
            border-radius: 0px 0px 0px 0px;

            .right-line {
              height: 35px;
              width: 100%;
              white-space: nowrap;
              // border-bottom: 1px solid #205884;
              .right-item {
                width: 145px;
                height: 100%;
                font-weight: 400;
                font-size: 14px;
                color: #ffffff;
                line-height: 35px;
                text-align: center;
                font-style: normal;
                display: inline-block;
                border-bottom: 1px solid #ed8c0b;
                margin-right: 2px;
                // background: rgba(0, 13, 35, 0.48);
              }
              .right-item:first-child {
                width: 149px;
                height: 35px;
                // background: url(../../../images/title-bag.png) no-repeat;
                // background-size: 100% 100%;
                border: 1px solid #ed8c0b;
                border-width: 1px 1px 0px 1px;
                font-weight: 400;
                font-size: 14px;
                color: #e0d9cf;
                line-height: 35px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin-right: 2px;
              }
            }
            .right-line:last-child {
              .right-item {
                border-bottom: 1px solid transparent;
              }
            }
          }
        }
      }
      .fileDownload {
        width: 100%;
        height: 54px;
        border: 1px solid #ed8c0b;
        box-shadow: 0px 0px 6px 1px rgba(255, 153, 0, 0.36);
        display: flex;
        align-items: center;
        justify-content: space-between;

        div:first-child {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 0px;
          text-align: center;
          font-style: normal;
          img {
            width: 39px;
            height: 39px;
            margin-right: 17px;
            margin-left: 26px;
            cursor: pointer;
          }
        }
        div:last-child {
          width: 108px;
          height: 36px;
          border: 1px solid #ed8c0b;
          box-shadow: 0px 0px 6px 1px rgba(255, 153, 0, 0.36);
          margin-right: 18px;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 36px;
          text-align: center;
          font-style: normal;
          cursor: pointer;
        }
      }
    }
  }
  .bottom {
    .listline {
      display: flex;
      margin-top: 14px;
    }
  }
  .listbox {
    text-align: left;
    display: flex;
    background: #4a3417;
    border-left: 3px solid #ff9e1b;
    padding: 6px;
    margin-right: 24px;
    color: #fff;
    .title {
      color: #e0d9cf;
      margin-right: 20px;
      align-self: centerv;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #ff9e1b;
        box-shadow: 0px 0px 6px 1px rgba(255, 153, 0, 0.36);
        border-radius: 3px 3px 3px 3px;
        margin: 0 8px;
      }
    }
  }
}
</style>
